<!--
 * @Author: hrg
 * @Date: 2023-11-30 15:50:08
 * @LastEditTime: 2023-12-02 17:22:32
 * @FilePath: \easy_dashboard\web\src\views\basicConfig\index.vue
 * @Description: 基础配置页面
-->
<template>
  <div>
    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider
        width="200"
        style="background: #fff"
      >
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          :items="state.items"
          style="height: 100%"
          @select="menuSelect"
        />
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
        <router-view v-if="route.path !='/data/basicConfig'" />
				<div v-else>
					<h1>基础配置熬</h1>
				</div>
      </a-layout-content>
    </a-layout>
  </div>
</template>
<script>
	import { reactive,onMounted } from 'vue';
	import { useRoute, useRouter } from "vue-router";
	import  {useMenu}  from "@/layout/menu/menu.js"
	export default {
		setup() {
			const route = useRoute()
			const router = useRouter()
			const state = reactive({
				msg:"基础配置",
				items:[
					{
						key:"/data/basicConfig",
						label:"主页"
					},
					{
						key:"user",
						label:"用户",
						children:[
							{
								key:"/data/basicConfig/main",
								label:"用户管理"
							},
							{
								key:"/data/basicConfig/permissions",
								label:"用户权限"
							},{
								key:"/data/basicConfig/role",
								label:"角色"
							}
						]
					}
				]
			})

			const menuSelect =(e)=>{
				router.push(e.key)
			}
			const {selectedKeys} = useMenu()
			onMounted(()=>{
				console.log("页面挂载时的路由：：：",route.path);
			})
			return{
				state,
				menuSelect,
				selectedKeys,
				route
			}
		}
	}
</script>